<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>stu_manage</title>
		<link href="assets/css/bootstrap.css" rel="stylesheet" />
		<link href="assets/css/font-awesome.css" rel="stylesheet" />
		<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
		<link href="assets/css/custom-styles.css" rel="stylesheet" />
		<link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
		<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
	</head>
	<!--下面继承，使用4个超链接，ajax局部刷新-->

	<body>
		<div id="wrapper">
			<nav class="navbar-default navbar-side" role="navigation">
				<div class="sidebar-collapse">
					<ul class="nav" id="main-menu">

						<li>
							<a href="Lib_libmanage.html"><i class="fa fa-book"></i> LibManage</a>
						</li>
						<li>
							<a href="Lib_pcmanage.html"><i class="fa fa-desktop"></i>ComputetManage</a>
						</li>
						<li>
							<a class="active-menu" href="Lib_stumanage.html"><i class="fa fa-users"></i> MemberManage</a>
						</li>
					</ul>
				</div>
				<!--
                  	作者：annz
                  	时间：2018-06-13
                  	描述：对应的4个实验室要管理的部分
                  -->
			</nav>
			<div id="page-wrapper">

				<div class="panel panel-default">
					<div class="panel-heading">
						<h2>Student message and manage</h2><br>
					</div>
					<div class="panel-body">
						<div class="table-responsive">
							<table class="table table-striped table-bordered table-hover" id="dataTables-stu">
								<thead>
									<tr valueid="a0420" class="models">
										<th>id</th>
										<th>name</th>
										<th>class</th>
										<th>sex</th>
										<th>phone</th>
										<th>lib</th>
										<th>ctrl</th>
									</tr>
								</thead>
								<tbody id="allStudent">

								</tbody>
							</table>
						</div>
					</div>
				</div>

				<div class="panel-body">
					<ul class="nav nav-pills">
						<li class="">
							<a href="#add-pills" data-toggle="tab">Add_student</a>
						</li>
						<li class="">
							<a href="#write-pills" data-toggle="tab">Write Laboratory entry and exit</a>
						</li>
						<li class="">
							<a href="#echart-pills" data-toggle="tab">charts</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade" id="add-pills">
							<h4>Add_student</h4>
							<div class="form-group" style="width:40%">
								<label>chooseLib</label>
								<select id="libchoose" class="form-control">
									<option>Lib-001</option>
									<option>Lib-002</option>
									<option>Lib-003</option>
									<option>Lib-004</option>
								</select>
								<div class="form-group" style="width:10%">
									<label>Inputstuid</label>
									<input id="stuidinput" onKeyUp="value=value.replace(/[^\d]/g,'')">
								</div>
								<div class="form-group" style="width:10%">
									<label>Inputstuname</label>
									<input id="stunameinput">
								</div>
								<div class="form-group" style="width:15%">
									<label>Inputstuclass</label>
									<input id="stuclassinput">
								</div>

								<div class="form-group" style="width:10%">
									<label>choosesex</label>
									<select id="sexchoose" class="form-control">
										<option>♂</option>
										<option>♀</option>
									</select>

									<div class="form-group" style="width:15%">
										<label>InputPhone</label>
										<input id="Phoneinput">
									</div>
									<div class="form-group" style="width:10%">
										<button onclick="add_Student()">Add Student</button>
									</div>
								</div>
							</div>
						</div>

						<div class="tab-pane fade" id="write-pills">
							<h4>Write Laboratory entry and exit</h4>
							<div class="form-group" style="width:150%">
								<label>Inputstuid</label>
								<input id="stuid_w_input">
							</div>
							<div class="form-group" style="width:25%">
								<label>Inputbegintime</label>
								<input id="begin" type="datetime-local">
							</div>
							<div class="form-group" style="width:25%">
								<label>Inputovertime</label>
								<input id="over" type="datetime-local">
							</div>
							<div class="form-group" style="width:15%">
								<label>InputUsingPCid</label>
								<input id="PCID">
							</div>
							<div class="form-group" style="width:20%">
								<label>chooseLib</label>
								<select id="libchoose2" class="form-control">
									<option>Lib-001</option>
									<option>Lib-002</option>
									<option>Lib-003</option>
									<option>Lib-004</option>
								</select>
							</div>
							<div class="form-group" style="width:10%">
								<button onclick="add_write()">Writing</button>
							</div>

						</div>
						<script src="assets/js/echarts.min.js"></script>
						<div class="tab-pane fade" id="echart-pills">
                        
						</div>

					</div>

				</div>
			</div>
			<script src="assets/js/jquery-1.10.2.js">
			</script>
			<script src="assets/js/bootstrap.min.js"></script>
			<script src="assets/js/jquery.metisMenu.js"></script>
			<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
			<script src="assets/js/morris/morris.js"></script>
			<script src="assets/js/custom-scripts.js"></script>
			<script src="assets/js/dataTables/jquery.dataTables.js"></script>
			<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
			<script>
				window.onload = function fresh() {
					var AllST_table = document.getElementById("allStudent");
					var strs = 1;
					$.ajax({
						url: '/libmanage/Fresh_stumanage',
						data: {
							"strs": strs,
						},
						dataType: 'json',
						type: 'POST',
						success: function(jsondata) {
							console.log(jsondata)
							AllST_table.innerHTML = "";
							creatstumanagetable(jsondata.jsondata, AllST_table);
							datainit();
						}
					})
				}

				function datainit() {
					$('#dataTables-stu').dataTable();
				}

				function creatstumanagetable(data, tb) {
					for(var i = 0; i < data.length; i++) {
						var idtd = document.createElement("td");
						var nametd = document.createElement("td");
						var classtd = document.createElement("td");
						var sextd = document.createElement("td");
						var phonetd = document.createElement("td");
						var Libtd = document.createElement("td");
						var deletetd = document.createElement("td");
						idtd.innerHTML = data[i].stu_id;
						nametd.innerHTML = data[i].stu_name;
						classtd.innerHTML = data[i].stu_class;
						sextd.innerHTML = data[i].stu_sex;
						phonetd.innerHTML = data[i].stu_phone;
						Libtd.innerHTML = data[i].stu_type;
						var bt1 = document.createElement("a");
						bt1.innerHTML = "->delete";
						bt1.setAttribute("onclick", "deletel('" + data[i].id + "')");
						deletetd.appendChild(bt1);

						var modifyclass = document.createElement("a");
						modifyclass.innerHTML = "->Modify";
						modifyclass.setAttribute("onclick", "modifyclass('" + data[i].id + "')");
						classtd.appendChild(modifyclass);

						var modifyphone = document.createElement("a");
						modifyphone.innerHTML = "->Modify";
						modifyphone.setAttribute("onclick", "modifyphone('" + data[i].id + "')");
						phonetd.appendChild(modifyphone);

						classtd.setAttribute("id", data[i].id + "class");
						phonetd.setAttribute("id", data[i].id + "phone");

						var tr = document.createElement("tr");
						tr.setAttribute("id", data[i].id);
						tr.appendChild(idtd)
						tr.appendChild(nametd)
						tr.appendChild(classtd)
						tr.appendChild(sextd)
						tr.appendChild(phonetd)
						tr.appendChild(Libtd)
						tr.appendChild(deletetd)
						tb.appendChild(tr)
					}
				}

				function modifyclass(id) {
					var newclass = prompt("Input new class");
					var td = document.getElementById(id + "class");
					td.innerHTML = newclass;
					var modifyclass = document.createElement("a");
					modifyclass.innerHTML = "->Modify";
					modifyclass.setAttribute("onclick", "modifyclass('" + id + "')");
					td.appendChild(modifyclass);
					$.ajax({
						url: 'libmanage/class_stumanage',
						data: {
							"newclass": newclass,
							"id": id,
						},
						dataType: 'json',
						type: 'POST',
						success: function(jsondata) {
							if(jsondata.mes !== "wrong") {
                                    initdata();
							}

						}
					})

				}

				function modifyphone(id) {
					var newphone = prompt("Input new phone");
					var td = document.getElementById(id + "phone");
					td.innerHTML = newphone;
					var modifyphone = document.createElement("a");
					modifyphone.innerHTML = "->Modify";
					modifyphone.setAttribute("onclick", "modifyphone('" + id + "')");
					td.appendChild(modifyphone);
					$.ajax({
						url: 'libmanage/phone_stumanage',
						data: {
							"newphone": newphone,
							"id": id,
						},
						dataType: 'json',
						type: 'POST',
						success: function(jsondata) {
							if(jsondata.mes !== "wrong") {
                                    initdata();
							}


						}
					})
				}

				function deletel(id) {
					if(window.confirm('You sure to delete？')) {
						$.ajax({
							url: 'libmanage/Delete_stumanage',
							data: {
								"id": id,
							},
							dataType: 'text',
							type: 'POST',
							success: function(deleteid) {
								alert(deleteid + "is deleted");
								var tr = document.getElementById(id);
								tr.parentNode.removeChild(tr);
								$('#dataTables-pc').dataTable();
								//先删,增，再改，最后实时。 同理学生管理。
							}
						})

					} else {

					}
				}

				function add_Student() {
					var stuid = document.getElementById("stuidinput").value;
					var name = document.getElementById("stunameinput").value;
					var classs = document.getElementById("stuclassinput").value;
					var sex = document.getElementById("sexchoose").value;
					var phone = document.getElementById("Phoneinput").value;
					var lib = document.getElementById("libchoose").value;
					$.ajax({
						url: 'libmanage/Addstumanage',
						data: {
							"stuid": stuid,
							"name": name,
							"classs": classs,
							"sex": sex,
							"phone": phone,
							"lib": lib,
						},
						dataType: 'json',
						type: 'POST',
						success: function(pclist) {
							console.log(pclist);
							var tr = document.createElement("tr");
							tr.setAttribute("id", "temp");
							var idtd = document.createElement("td");
							var nametd = document.createElement("td");
							var classtd = document.createElement("td");
							var sextd = document.createElement("td");
							var phonetd = document.createElement("td");
							var libtd = document.createElement("td");
							var ctrtd = document.createElement("td");
							idtd.innerHTML = pclist[0];
							nametd.innerHTML = pclist[1];
							classtd.innerHTML = pclist[2];
							sextd.innerHTML = pclist[3];
							phonetd.innerHTML = pclist[4];
							libtd.innerHTML = pclist[5];
							var bt1 = document.createElement("a");
							var bt2 = document.createElement("a");
							bt1.innerHTML = "->delete";
							bt1.setAttribute("onclick", "deletel('" + pclist[0] + "')");
							bt1.setAttribute("class", "btn-xs");
							ctrtd.appendChild(bt1);
							tr.appendChild(idtd)
							tr.appendChild(nametd)
							tr.appendChild(classtd)
							tr.appendChild(sextd)
							tr.appendChild(phonetd)
							tr.appendChild(libtd)
							tr.appendChild(ctrtd)
							document.getElementById("allStudent").appendChild(tr)

							$('#dataTables-pc').dataTable();
							//先删,增，再改，最后实时。 同理学生管理。
						}
					})
				}

				function add_write() {
					var begin = document.getElementById("begin").value;
					var over = document.getElementById("over").value;
					var name = document.getElementById("stuid_w_input").value;
					var lib = document.getElementById("libchoose2").value;
					var pcid = document.getElementById("PCID").value;
					$.ajax({
						url: 'libmanage/add_writing',
						data: {
							"begin": begin,
							"over": over,
							"name": name,
							"pcid": pcid,
							"lib": lib,
						},
						dataType: 'json',
						type: 'POST',
						success: function(rs) {
							alert(rs)

							//先删,增，再改，最后实时。 同理学生管理。
						}
					})

				}
			</script>
	</body>

</html>